<template>
  <div class="pay-container">
    <div class="top">
      <el-row type="flex" justify="left">
        <div class="top_item">
          <label class="label">企业名称</label>
          <el-input v-model="partCompany" type="text" placeholder="请输入企业名称" class="input" clearable />
        </div>
        <div class="top_item">
          <label class="label">缴费流程</label>
          <el-select v-model="isInserted" clearable @change="handleChange">
            <el-option value="未录入">未录入</el-option>
            <el-option value="缴费录入">缴费录入</el-option>
            <el-option value="信息初审">信息初审</el-option>
            <el-option value="名单核对">名单核对</el-option>
            <el-option value="汇款">汇款</el-option>
            <el-option value="对账">对账</el-option>
            <el-option value="办理完结">办理完结</el-option>
          </el-select>
        </div>
        <div v-if="isInserted != '未录入' && isInserted != ''" class="top_item">
          <label class="label">缴费年度</label>
          <el-date-picker
            v-model="insertTime"
            type="year"
            placeholder="请选择年度"
            value-format="yyyy-mm-dd"
          />
        </div>
        <div class="top_item">
          <el-button type="primary" icon="el-icon-search" @click="getPayInfo()">查询</el-button>
          <el-button @click="reset()"> 重置</el-button>
        </div>
      </el-row>
      <el-row type="flex" justify="left">
        <el-table
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :data="payInfoData"
          max-height="400px"
        >
          <el-table-column v-if="false" prop="payInfoId" label="编号" />
          <el-table-column prop="ind" label="序号" :formatter="handleIndex" />
          <el-table-column prop="companyName" label="企业名称" />
          <el-table-column prop="companyCreditCode" label="统一信用代码" />
          <el-table-column prop="isInserted" label="是否录入" :formatter="handleIsInserted" />
          <el-table-column prop="participateNumber" label="缴费人数" />
          <el-table-column prop="transacteStatus" label="办理进度" :formatter="handleStatus" />
          <el-table-column prop="paySum" label="应缴金额" />
          <el-table-column prop="transacteStatus" label="汇款状态" :formatter="handleTranStatus" />
          <el-table-column prop="insertTime" label="缴费时间" :formatter="handleDate" />
          <el-table-column prop="payYear" label="缴费年份" />
          <el-table-column label="操作" fixed="right" min-width="120px">
            <template v-if="scope.row.isInserted != 'N' && scope.row.isInserted != ''" slot-scope="scope">
              <el-button type="primary" size="small" @click="showDetail(scope.row.payInfoId)">详情</el-button>&nbsp;
              <el-button type="primary" size="small" @click="openNotifyDialog(scope.row.payInfoId)">通知</el-button>&nbsp;
            </template>
          </el-table-column>
        </el-table>
        <el-dialog v-if="relatedPayInfo != null" title="缴费信息修改明细（下划线部分为修改处）" :visible.sync="messageInfoDialog">
          <el-table
            :header-cell-style="{'text-align':'center'}"
            :data="[relatedPayInfo]"
            :cell-style="handleModifiedColumn"
            max-height="400px"
          >
            <el-table-column v-if="false" prop="payInfoId" label="编号" />
            <el-table-column prop="participateCompanyName" label="企业名称" />
            <el-table-column prop="payYear" label="缴费年份" />
            <el-table-column prop="isInserted" label="是否录入" :formatter="handleIsInserted" />
            <el-table-column prop="participateNumber" label="缴费人数" />
            <el-table-column prop="paySum" label="应缴金额" />
            <el-table-column prop="payYear" label="缴费年份" />
            <el-table-column prop="payCompanyName" label="缴费单位" />
            <el-table-column prop="payAccount" label="缴费账号" />
            <el-table-column prop="userName" label="经办人姓名" />
            <el-table-column prop="userPhone" label="经办人手机号" />
            <el-table-column label="上传文件">
              <el-image :src="fileName" style="width: fit-content; height: fit-content; cursor:pointer" @click="showImage" />
            </el-table-column>
            <el-table-column label="操作" width="200px" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="doApproval(scope.row.payInfoId,'1')">通过</el-button>
                <el-button size="small" @click="doApproval(scope.row.payInfoId,'0')">撤回</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        <el-dialog v-if="fileName != ''" title="图片展示" :visible.sync="showImageDialog">
          <el-image :src="fileName" style="width: 100%; height:80%" />
          <el-row type="flex" justify="center" style="width: 100%; height:20%">
            <el-button icon="el-icon-download" type="primary" @click="downloadImg">下载</el-button>
          </el-row>
        </el-dialog>
        <el-dialog v-if="payInfo != null" id="detail" :visible.sync="showPayInfoDialog" custom-class="customWidth">
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
          <div class="rightPart">
            <div v-if="relatedPayInfo !== null" class="messageInfo">
              <span style="cursor:pointer" @click="showMessageInfoDialog"><i class="el-icon-warning-outline">该记录有修改记录未处理，请及时处理。点击查看详情</i></span>
            </div>
            <h2 class="h2_title">基本信息</h2>
            <el-tabs v-model="activeName">
              <el-tab-pane label="缴费信息" name="first">
                <ul class="detailLeftPart">
                  <li>
                    <label>地区归属</label>
                    <el-input v-model="payInfo.companyArea" disabled />
                  </li>
                  <li>
                    <label>参保单位</label>
                    <el-input v-model="payInfo.participateCompanyName" disabled />
                  </li>
                  <li>
                    <label>开票单位</label>
                    <el-input v-model="payInfo.invoiceCompanyName" disabled />
                  </li>
                  <li>
                    <label>转账账号</label>
                    <el-input v-model="payInfo.payAccount" disabled />
                  </li>
                </ul>
                <ul class="detailLeftPart">
                  <li>
                    <label>缴费人数</label>
                    <el-input v-model="payInfo.participateNumber" disabled />
                  </li>
                  <li>
                    <label>经办人</label>
                    <el-input v-model="payInfo.userName" disabled />
                  </li>
                  <li>
                    <label>应缴金额</label>
                    <el-input v-model="payInfo.paySum" disabled />
                  </li>
                  <li>
                    <label>上级工会</label>
                    <el-input v-model="payInfo.superiorUnion" disabled />
                  </li>
                </ul>
                <ul class="detailLeftPart">
                  <li>
                    <label>信用代码</label>
                    <el-input v-model="payInfo.invoiceCompanyCreditCode" disabled />
                  </li>
                  <li>
                    <label>缴费单位</label>
                    <el-input v-model="payInfo.payCompanyName" disabled />
                  </li>
                  <li>
                    <label>开户银行</label>
                    <el-input v-model="payInfo.payCompanyAcctBank" disabled />
                  </li>
                  <li>
                    <label>手机号</label>
                    <el-input v-model="payInfo.userPhone" disabled />
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="交易信息" name="second">
                <el-table
                  :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}"
                  :data="transInfoData"
                  max-height="400px"
                  style="min-width:300px"
                  class="transTable"
                >
                  <el-table-column v-if="false" prop="transferId" label="交易编号" />
                  <el-table-column prop="ind" label="序号" :formatter="handleTransIndex" />
                  <el-table-column prop="bankAccount" label="银行账号" />
                  <el-table-column prop="bankAccountName" label="银行账户名" />
                  <el-table-column prop="oppBankAccountName" label="对方户名" />
                  <el-table-column prop="oppBankAccount" label="对方账号" />
                  <el-table-column prop="oppBankName" label="对方开户行名" />
                  <el-table-column prop="amt" label="交易金额" />
                  <el-table-column prop="transTime" label="交易时间" :formatter="handleDate" />
                  <el-table-column prop="abs" label="备注" />
                  <el-table-column v-if="transInfoData !== null && transInfoData.length !== 0" label="操作" fixed="right" min-width="150px">
                    <template slot-scope="scope">
                      <el-button type="primary" :plain="true" size="small" @click="relevanceCheck(scope.row.transferId)">解除关联</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  style="display:flex;justify-content: center"
                  :page-size="transPageSize"
                  :current-page="transCurrentPage"
                  :page-sizes="[5,10,20,50]"
                  layout="sizes,prev,pager,next,total"
                  :total="transTotalCount"
                  @size-change="handleTransInfoSizechange"
                  @current-change="handleTransInfoCurrentchange"
                /></el-tab-pane>
            </el-tabs>
            <h2 class="h2_title">留言板</h2>
            <el-tabs v-model="messageActiveName" @tab-click="handleClick">
              <el-tab-pane label="全部留言" name="first">
                <el-row type="flex" justify="center" style="width:100%;margin-bottom:20px">
                  <el-input v-model="msgContent" type="textarea" placeholder="请输入留言,字数限制在140字内" maxlength="140" />
                  <el-button type="primary" style="resize:false" @click="saveMessageInfo(payInfo.payInfoId)">发送</el-button>
                </el-row>
                <div v-if="messageListData.length != 0" class="msgListContainer">
                  <el-row v-for="msg in messageListData" :key="msg.messageId" type="flex" class="msgRow">
                    <div class="profile">{{ msg.userId.substr(0,1).toUpperCase() }}</div>
                    <span style="width: 20%;max-width:20%">{{ msg.userId }}&nbsp;({{ msg.messageTime.substr(0,10) }}):&nbsp;</span>
                    <span style="width: 50%;max-width:50%">{{ msg.messageContent }}</span>
                    <ul class="btnList">
                      <li v-if="msg.userId === currentUserId" style="cursor:pointer" @click="showModifyDialog(msg)">修改</li>
                      <li v-if="msg.userId === currentUserId" style="cursor:pointer" @click="deleteMessage(msg.messageId)">删除</li>
                      <!-- <li>回复</li> -->
                    </ul>
                  </el-row>
                </div>
                <el-pagination
                  v-if="messageListData.length != 0"
                  style="display:flex;justify-content: center"
                  :page-size="msgPageSize"
                  :current-page="msgCurrentPage"
                  :page-sizes="[5,10,20,50]"
                  layout="sizes,prev,pager,next,total"
                  :total="msgTotalCount"
                  @size-change="handleMsgSizechange"
                  @current-change="handleMsgCurrentchange"
                />
              </el-tab-pane>
              <el-tab-pane label="我的留言" name="second">
                <el-row type="flex" justify="center" style="width:100%;margin-bottom:20px">
                  <el-input v-model="msgContent" type="textarea" placeholder="请输入留言,字数限制在140字内" maxlength="140" />
                  <el-button type="primary" style="resize:false" @click="saveMessageInfo(payInfo.payInfoId)">发送</el-button>
                </el-row>
                <div v-if="messageListData.length != 0" class="msgListContainer">
                  <el-row v-for="msg in messageListData" :key="msg.messageId" type="flex" class="msgRow">
                    <div class="profile">{{ msg.userId.substr(0,1).toUpperCase() }}</div>
                    <span style="width: 20%;max-width:20%">{{ msg.userId }}&nbsp;({{ msg.messageTime.substr(0,10) }}):&nbsp;</span>
                    <span style="width: 50%;max-width:50%">{{ msg.messageContent }}</span>
                    <ul class="btnList">
                      <li style="cursor:pointer" @click="showModifyDialog(msg)">修改</li>
                      <li style="cursor:pointer" @click="deleteMessage(msg.messageId)">删除</li>
                      <!-- <li>回复</li> -->
                    </ul>
                  </el-row>
                </div>
                <el-pagination
                  v-if="messageListData.length != 0"
                  style="display:flex;justify-content: center"
                  :page-size="msgPageSize"
                  :current-page="msgCurrentPage"
                  :page-sizes="[5,10,20,50]"
                  layout="sizes,prev,pager,next,total"
                  :total="msgTotalCount"
                  @size-change="handleMyMsgSizechange"
                  @current-change="handleMyMsgCurrentchange"
                />
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-dialog>
        <!--<el-dialog v-if="payInfo != null" title="留言板" :visible.sync="showMessageDialog">
        </el-dialog> -->
        <el-dialog v-if="payInfo != null" title="通知" :visible.sync="showNotifyDialog">
          <el-row type="flex" justify="center" class="notifyRow">
            <label>通知对象</label>
            <el-input v-model="payInfo.participateCompanyName" disabled />
          </el-row>
          <el-row type="flex" justify="center" class="notifyRow">
            <label>模板</label>
            <el-select v-model="template" @change="handleTemplateChange">
              <el-option v-for="(tmp,i) in templates" :key="i" :value="i" :label="tmp.templateContent" />
            </el-select>
          </el-row>
          <el-row v-for="i in paramsLength" :key="i" type="flex" justify="center" class="notifyBody">
            <label>参数{{ i }}</label>
            <el-input v-model="notificationBody[i]" :disabled="notificationBody[i] !== null && notificationBody[i] !== ''" style="margin-left:10px" type="textarea" maxlength="140" placeholder="请输入内容，不超过140字" />
          </el-row>
          <el-row type="flex" justify="center">
            <el-button type="primary" @click="sumbitNotification">提交</el-button>
            <el-button @click="resetNotification">重置</el-button>
          </el-row>
        </el-dialog>
        <el-dialog v-if="msgInfo != null" title="修改留言信息" :visible.sync="showModiDialog">
          <label>留言内容</label>
          <el-input v-model="msgInfo.messageContent" type="text" style="width: 400px" />
          <el-row type="flex" justify="center">
            <el-button type="primary" @click="updateMsgInfo()">确定</el-button>
          </el-row>
        </el-dialog>
      </el-row>
      <el-row type="flex" justify="center" class="pagination">
        <el-pagination
          style="display:flex;justify-content: center"
          :page-size="pageSize"
          :current-page="currentPage"
          :page-sizes="[5,10,20,50]"
          layout="sizes,prev,pager,next,total"
          :total="totalCount"
          @size-change="handlePayInfoSizechange"
          @current-change="handlePayInfoCurrentchange"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import payApi from '@/api/pay.js'
import msgApi from '@/api/message.js'
import transApi from '@/api/trans.js'
import compApi from '@/api/compApi.js'
import approApi from '@/api/approval.js'
import { getUserInfo } from '@/api/user.js'
import fileApi from '@/api/file.js'
import { queryTemplateList } from '@/api/sys'
import store from '@/store'
import { MessageBox } from 'element-ui'
import router from '@/router'
import { getToken } from '@/utils/auth'

export default {
  name: 'Lalala',
  data() {
    // 保证每个实例都初始化一次
    return {
      fileName: '',
      showImageDialog: false,
      currentUserId: null,
      activeName: 'first',
      messageActiveName: 'first',
      ind: 1,
      partCompany: '',
      isInserted: '',
      insertTime: '',
      payInfoData: [],
      transInfoData: [],
      pageSize: 5,
      totalCount: 0,
      currentPage: 1,
      transPageSize: 5,
      transTotalCount: 0,
      transCurrentPage: 1,
      msgPageSize: 5,
      msgTotalCount: 0,
      msgCurrentPage: 1,
      msgInfo: null,
      payInfo: null,
      relatedPayInfo: null,
      showPayInfoDialog: false,
      showModiDialog: false,
      messageListData: [],
      messageInfoDialog: false,
      showMessageDialog: false,
      showMessageInfo: false,
      showNotifyDialog: false,
      notificationBody: [],
      msgContent: '',
      template: '',
      templates: [],
      paramsLength: 0,
      reverse: false,
      msgTemplateInfo: null,
      activities: [{
        content: '缴费录入'
      }, {
        content: '信息初审'
      }, {
        content: '名单核对'
      }, {
        content: '汇款'
      }, {
        content: '对账'
      }, {
        content: '办理完结'
      }]
    }
  },
  // 加载页面时执行
  created() {
    this.getPayInfo()
    queryTemplateList().then(res => {
      if (res.retCode === '0000') {
        this.templates = res.list
      }
    })
  },
  // 方法区
  methods: {
    reset: function() {
      this.insertTime = null
      this.partCompany = ''
      this.isInserted = ''
    },
    resetNotification: function() {
      this.template = ''
      this.paramsLength = 0
    },
    sumbitNotification: function() {
      var params1 = []
      if (this.msgTemplateInfo === null) {
        this.$message.error('模板信息为空')
      }
      if (this.msgTemplateInfo.tencentId === '872429') {
        params1 = [this.payInfo.participateCompanyName, msgApi.expire_days]
      } else if (this.msgTemplateInfo.tencentId === '875859') {
        params1 = [this.payInfo.participateCompanyName]
      }
      const params = {
        tencentId: this.msgTemplateInfo.tencentId,
        phoneNumbers: JSON.stringify([this.payInfo.userPhone]),
        templateParams: JSON.stringify(params1)
      }
      msgApi.sendNotifyMsg(params).then(res => {
        if (res.retCode === '0000') {
          this.$message.success('发送信息成功！')
        } else {
          this.$message.success('发送信息失败！')
        }
        this.showNotifyDialog = false
        this.template = ''
        this.paramsLength = 0
      })
    },
    getPayInfo: function() {
      var insertTime = ''
      if (this.insertTime != null) {
        insertTime = this.insertTime.substr(0, 4)
      }
      this.currentPage = 1
      this.getPayListInfo(this.currentPage, insertTime)
    },
    getPayListInfo: function(cp, insertTime) {
      var bool = ''
      var status = ''
      switch (this.isInserted) {
        case '未录入': bool = 'N'; break
        case '缴费录入': bool = 'Y'; status = '1'; break
        case '信息初审': bool = 'Y'; status = '2'; break
        case '名单核对': bool = 'Y'; status = '3'; break
        case '汇款': bool = 'Y'; status = '4'; break
        case '对账': bool = 'Y'; status = '5'; break
        case '办理完结': bool = 'Y'; status = '6'; break
        default: break
      }
      const params = {
        partCompany: this.partCompany,
        pageSize: this.pageSize,
        currentPage: cp,
        isInserted: bool,
        status: status,
        payYear: insertTime,
        findAll: 'N'
      }
      payApi.searchPayInfoList(params).then(res => {
        if (res.retCode === '0000') {
          this.payInfoData = res.list
          this.totalCount = res.pageInfo.totalSize
        } else {
          this.$message.error('获取缴费列表信息失败，原因' + res.retMsg)
        }
      })
    },
    downloadImg: function() {
      if (this.fileName === null || this.fileName === '') {
        this.$message.error('图片不存在')
        return
      }
      const link = document.createElement('a')
      link.href = this.fileName
      link.download = 'download.jpg'
      link.click()
    },
    showImage: function() {
      if (this.fileName === null || this.fileName === '') {
        this.$message.error('图片不存在')
        return
      }
      this.showImageDialog = true
    },
    getMyMsgListInfo: function(id) {
      const params = {
        payInfoId: id,
        userId: this.currentUserId,
        pageSize: this.msgPageSize,
        currentPage: this.msgCurrentPage
      }
      msgApi.searchMessageInfoList(params).then(res => {
        if (res.retCode === '0000') {
          getUserInfo().then(res => {
            if (res.retCode === '0000') {
              this.currentUserId = res.userId
            } else {
              this.$message.error('获取用户信息失败，原因' + res.retMsg)
              location.href = '/login'
            }
          })
          this.messageListData = res.list
          this.msgTotalCount = res.pageInfo.totalSize
          this.showMessageDialog = true
        } else {
          this.$message.error('获取消息信息失败，原因' + res.retMsg)
        }
      })
    },
    getMsgListInfo: function(id) {
      const params = {
        payInfoId: id,
        userId: '',
        pageSize: this.msgPageSize,
        currentPage: this.msgCurrentPage
      }
      msgApi.searchMessageInfoList(params).then(res => {
        if (res.retCode === '0000') {
          getUserInfo().then(res => {
            if (res.retCode === '0000') {
              this.currentUserId = res.userId
            } else {
              this.$message.error('获取用户信息失败，原因' + res.retMsg)
              location.href = '/login'
            }
          })
          this.messageListData = res.list
          this.msgTotalCount = res.pageInfo.totalSize
          this.showMessageDialog = true
        } else {
          this.$message.error('获取消息信息失败，原因' + res.retMsg)
        }
      })
    },
    saveMessageInfo: function(id) {
      const params = {
        payInfoId: id,
        messageContent: this.msgContent
      }
      msgApi.saveMessageInfo(params).then(res => {
        if (res.retCode === '0000') {
          this.$message.success('发送留言成功!')
          if (this.messageActiveName === 'first') {
            this.getMsgListInfo(id)
          } else {
            this.getMyMsgListInfo(id)
          }
          this.msgContent = ''
        } else {
          this.$message.error('发送留言失败，原因' + res.retMsg)
        }
      })
    },
    openNotifyDialog: function(id) {
      getUserInfo().then(res => {
        if (res.userId === 'guest' || !getToken()) {
          MessageBox.alert('用户登录已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              store.dispatch('user/logout').then(() => {
                router.push('/login')
              })
            }
          })
        } else {
          var params = {
            payInfoId: id
          }
          payApi.showPayInfoDetail(params).then(res => {
            if (res.retCode === '0000') {
              this.payInfo = res.payInfo
              switch (this.payInfo.companyArea) {
                case '0' : this.payInfo.companyArea = '市本级'; break
                case '1' : this.payInfo.companyArea = '吴兴区'; break
                default: break
              }
              msgApi.setMessageTemplates(this.templates)
              this.showNotifyDialog = true
              this.template = ''
              this.paramsLength = 0
            } else {
              this.$message.error('获取缴费信息失败，原因' + res.retMsg)
            }
          })
        }
      })
    },
    resetMsgContent: function() {
      this.msgContent = ''
    },
    showMessage: function() {
      getUserInfo().then(res => {
        if (res.userId === 'guest' || !getToken()) {
          MessageBox.alert('用户登录已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              store.dispatch('user/logout').then(() => {
                router.push('/login')
              })
            }
          })
        } else {
          this.showMessageInfo = true
        }
      })
    },
    showMessageInfoDialog: function() {
      getUserInfo().then(res => {
        if (res.userId === 'guest' || !getToken()) {
          MessageBox.alert('用户登录已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              store.dispatch('user/logout').then(() => {
                router.push('/login')
              })
            }
          })
        } else {
          this.messageInfoDialog = true
          const params = {
            filePath: this.relatedPayInfo.filename
          }
          fileApi.downloadImg(params).then(res => {
            if (res.retCode === '0000') {
              this.fileName = res.fileInfo
            } else {
              this.$message.error('获取图片信息失败，原因是' + res.retMsg)
            }
          })
        }
      })
    },
    showDetail: function(id) {
      getUserInfo().then(res => {
        if (res.userId === 'guest' || !getToken()) {
          MessageBox.alert('用户登录已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              store.dispatch('user/logout').then(() => {
                router.push('/login')
              })
            }
          })
        } else {
          const params = {
            payInfoId: id
          }
          this.activeName = 'first'
          this.messageActiveName = 'first'
          this.relatedPayInfo = null
          payApi.showPayInfoDetail(params).then(res => {
            if (res.retCode === '0000') {
              this.payInfo = res.payInfo
              const params2 = {
                compName: this.payInfo.participateCompanyName,
                payYear: this.payInfo.payYear
              }
              payApi.queryPayInfos(params2).then(res => {
                if (res.retCode === '0000') {
                  if (res.relatedPayInfo !== null) {
                    this.relatedPayInfo = res.relatedPayInfo
                    this.relatedPayInfo.payYear = this.payInfo.payYear
                    this.showMessage()
                  }
                } else {
                  this.$message.error('获取相关缴费信息失败，原因' + res.retMsg)
                }
              })
              switch (this.payInfo.companyArea) {
                case '0' : this.payInfo.companyArea = '市本级'; break
                case '1' : this.payInfo.companyArea = '吴兴区'; break
                default: break
              }
              this.getTransListInfo(id)
              this.activities.forEach((item, index) => {
                if (index < this.payInfo.transacteStatus - 1) {
                  item.type = 'success'
                } else if (index === this.payInfo.transacteStatus - 1) {
                  item.type = 'primary'
                } else {
                  item.type = ''
                }
              })
              this.getMsgListInfo(id)
            } else {
              this.$message.error('获取缴费信息失败，原因' + res.retMsg)
            }
          })
        }
      })
    },
    getTransListInfo: function(id) {
      var params = {
        payInfoId: id,
        pageSize: this.transPageSize,
        currentPage: this.transCurrentPage
      }
      transApi.searchTransInfoList(params).then(res => {
        if (res.retCode === '0000') {
          this.transInfoData = res.list
          this.transTotalCount = res.pageInfo.totalSize
          this.showPayInfoDialog = true
        } else {
          this.payInfo = null
          this.$message.error('获取交易信息失败，原因' + res.retMsg)
        }
      })
    },
    relevanceCheck: function(relevanceId) {
      var list = []
      list.push(relevanceId)
      const params = {
        payInfoId: this.payInfo.payInfoId,
        transferIdList: JSON.stringify(list),
        flag: '0'
      }
      this.$confirm('确定取消关联?', '确认消息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        compApi.relevanceCheck(params).then(res => {
          if (res.retCode === '0000') {
            this.$message.success('取消关联成功')
            this.transCurrentPage = 1
            this.getTransListInfo(this.payInfo.payInfoId)
            this.showDetail(this.payInfo.payInfoId)
            var insertTime = ''
            if (this.insertTime != null) {
              insertTime = this.insertTime.substr(0, 4)
            }
            this.getPayListInfo(this.currentPage, insertTime)
          } else {
            this.$message.error('取消关联失败，原因' + res.retMsg)
          }
        })
      }).catch(() => {
        this.$message.info('取消成功')
      })
    },
    updateMsgInfo: function() {
      const params = {
        messageId: this.msgInfo.messageId,
        messageContent: this.msgInfo.messageContent,
        payInfoId: this.msgInfo.payInfoId,
        userId: this.msgInfo.userId
      }
      console.log(params)
      msgApi.updateMessageInfo(params).then(res => {
        if (res.retCode === '0000') {
          this.$message.success('修改信息成功')
          if (this.messageActiveName === 'first') {
            this.getMsgListInfo(this.msgInfo.payInfoId)
          } else {
            this.getMyMsgListInfo(this.msgInfo.payInfoId)
          }
          this.showModiDialog = false
        } else {
          this.$message.error('修改信息失败，原因' + res.retMsg)
        }
      })
    },
    doApproval: function(payInfoId, result) {
      const params = {
        payInfoId: payInfoId
      }
      var approval = null
      approApi.queryApprovalInfo(params).then(res => {
        if (res.retCode === '0000') {
          approval = res.approvalInfo
          this.$prompt('请输入意见', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            const params = {
              approvalId: approval.approvalId,
              payInfoId: approval.payInfoId,
              approvalNode: approval.approvalNode,
              approvalResult: result,
              approvalRemark: value
            }
            if (value === null || value === '') {
              this.doApproval(payInfoId, result)
              this.$message.error('意见不能为空')
            } else {
              this.$confirm('请确认', '确认消息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                approApi.updateApproInfo(params).then(res => {
                  if (res.retCode === '0000') {
                    this.$message.success('审批成功')
                  } else {
                    this.$message.error('审批失败，原因' + res.retMsg)
                  }
                  this.showPayInfoDialog = false
                  this.messageInfoDialog = false
                  this.payInfo = null
                  var insertTime = ''
                  if (this.insertTime != null) {
                    insertTime = this.insertTime.substr(0, 4)
                  }
                  this.getPayListInfo(this.currentPage, insertTime)
                })
              }).catch(() => {
                this.$message.info('取消成功')
              })
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            })
          })
        } else {
          this.$message.error('审批失败，原因' + res.retMsg)
        }
      })
    },
    deleteMessage: function(messageId) {
      if (messageId == null) {
        this.$message.error('获取消息信息失败，请刷新页面')
      }
      const params = {
        messageId: messageId
      }
      this.$confirm('请确认', '确认消息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        msgApi.deleteMessageInfo(params).then(res => {
          if (res.retCode === '0000') {
            this.$message.success('删除信息成功')
            if (this.messageActiveName === 'first') {
              this.getMsgListInfo(this.payInfo.payInfoId)
            } else {
              this.getMyMsgListInfo(this.payInfo.payInfoId)
            }
          } else {
            this.$message.error('删除信息失败，原因' + res.retMsg)
          }
        })
      }).catch(() => {
        this.$message.info('取消成功')
      })
    },
    showModifyDialog: function(messageInfo) {
      getUserInfo().then(res => {
        if (res.userId === 'guest' || !getToken()) {
          MessageBox.alert('用户登录已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              store.dispatch('user/logout').then(() => {
                router.push('/login')
              })
            }
          })
        } else {
          if (messageInfo === null) {
            this.$message.error('获取消息信息失败，请刷新页面')
          }
          this.msgInfo = {
            messageId: messageInfo.messageId,
            payInfoId: messageInfo.payInfoId,
            userId: messageInfo.userId,
            messageContent: messageInfo.messageContent,
            messageTime: messageInfo.messageTime
          }
          this.showModiDialog = true
        }
      })
    },
    handleIsInserted: function(row, column, cellValue) {
      return (cellValue === 'Y' ? '是' : '否')
    },
    handleDate: function(row, column, cellValue) {
      if (cellValue == null) {
        return ''
      }
      return cellValue.substr(0, 10)
    },
    handleStatus: function(row, column, cellValue) {
      var val = ''
      switch (cellValue) {
        case '1': val = '缴费录入'; break
        case '2': val = '信息初审'; break
        case '3': val = '名单核对'; break
        case '4': val = '汇款'; break
        case '5': val = '对账'; break
        case '6': val = '办理完结'; break
      }
      return val
    },
    handleTranStatus: function(row, column, cellValue) {
      var val = ''
      switch (cellValue) {
        case '1':
        case '2':
        case '3':
        case '4': val = '未汇款'; break
        case '5': val = '已汇款'; break
        case '6': val = '已平账'; break
      }
      return val
    },
    handleIndex: function(row, column, cellValue, index) {
      return (index + 1) + (this.currentPage - 1) * this.pageSize
    },
    handleTransIndex: function(row, column, cellValue, index) {
      return (index + 1) + (this.transCurrentPage - 1) * this.transPageSize
    },
    handleMsgSizechange: function(val) {
      this.msgPageSize = val
      this.currentPage = 1
      this.getMsgListInfo(this.payInfo.payInfoId)
    },
    handleMyMsgSizechange: function(val) {
      this.msgPageSize = val
      this.currentPage = 1
      this.getMyMsgListInfo(this.payInfo.payInfoId)
    },
    handleMsgCurrentchange: function(val) {
      this.msgCurrentPage = val
      this.getMsgListInfo(this.payInfo.payInfoId)
    },
    handleMyMsgCurrentchange: function(val) {
      this.msgCurrentPage = val
      this.getMyMsgListInfo(this.payInfo.payInfoId)
    },
    handlePayInfoSizechange: function(val) {
      this.pageSize = val
      var insertTime = ''
      if (this.insertTime != null) {
        insertTime = this.insertTime.substr(0, 4)
      }
      this.currentPage = 1
      this.getPayListInfo(this.currentPage, insertTime)
    },
    handlePayInfoCurrentchange: function(val) {
      this.currentPage = val
      var insertTime = ''
      if (this.insertTime != null) {
        insertTime = this.insertTime.substr(0, 4)
      }
      this.getPayListInfo(this.currentPage, insertTime)
    },
    handleTransInfoSizechange: function(val) {
      this.transPageSize = val
      this.getTransListInfo(this.payInfo.payInfoId)
    },
    handleTransInfoCurrentchange: function(val) {
      this.transCurrentPage = val
      this.getTransListInfo(this.payInfo.payInfoId)
    },
    handleTemplateChange: function(val) {
      var params = []
      this.msgTemplateInfo = this.templates[val]
      if (this.msgTemplateInfo.tencentId === '872429') {
        params = [this.payInfo.participateCompanyName, msgApi.expire_days]
      } else if (this.msgTemplateInfo.tencentId === '875859') {
        params = [this.payInfo.participateCompanyName]
      }
      this.template = msgApi.getMessage(val, params)
    },
    handleChange: function(val) {
      if (val === null || val === '') {
        this.insertTime = ''
      }
    },
    handleModifiedColumn: function({ row, column, rowIndex, columnIndex }) {
      // 如果信息不相同就高亮显示
      if (this.payInfo[column.property] !== row[column.property]) {
        // 第三第四列的背景色就改变了2和3都是列数的下标
        return 'border-bottom:3px solid red; text-align:center'
      } else {
        return 'text-align:center;'
      }
    },
    handleClick: function() {
      this.messageListData = []
      this.msgCurrentPage = 1
      if (this.messageActiveName === 'first') {
        this.getMsgListInfo(this.payInfo.payInfoId)
      } else if (this.messageActiveName === 'second') {
        if (this.currentUserId === null || this.currentUserId === '') {
          return
        }
        this.getMyMsgListInfo(this.payInfo.payInfoId)
      }
    }
  }
}
</script>
<style>
  /* 顶部条件筛选栏*/
  .top {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    border:1px solid  rgba(0,0,0,0.2);
    box-shadow:1px 1px 2px 0px rgba(0,0,0,0.2);
  }
  .top_item{
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
  .top_item label {
    width: auto;
    min-width: fit-content;
    margin:10px;
  }
  .top_item input {
    width: auto;
    min-width: fit-content;
  }

  /* 中间表栏*/
  .body{
    margin-bottom: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    border: 1px solid  rgba(0,0,0,0.2);
    text-align: center;
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.2);
   }
   .pagination{
    display: flex;
    justify-content: center;
   }
   ul{
    list-style: none;
   }
   .customWidth {
    width: fit-content;
    height: fit-content;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    position: relative;
    overflow-y:auto;
    max-height: 80%;
   }
   .el-textarea__inner{
     resize: none;
   }
   .el-input.is-disabled .el-input__inner {
    border: 0px;
    background-color: #FFFFFF;
    color:black;
    text-align: center;
    margin-bottom:10px;
   }
   .rightPart{
    float: left;
    width: 70%;
    margin-left: 20%;
   }
   .detailLeftPart{
     width: fit-content;
     padding: 10px;
     display: flex;
     height: fit-content;
   }
   .detailLeftPart li {
    text-align: center;
    }
   .h2_title {
     margin-top: 0px;
     margin-bottom: 10px;
     text-align: left;
   }
   .detail label{
     width: inherit;
     border-bottom: 1px solid #999;
     float:left;
   }
   .msgBoxBody {
     display:inline-block;
     width: 80%;
     height: 80%;
     /* box-shadow: 1px 1px 4px 0px inset #999; */
     padding: 20px;
     max-height: 400px;
   }
   .msgBoxBody span {
     margin-bottom: 20px;
     font-size: 15px;
     max-height: 300px;
   }
   .notifyRow {
      float: left;
      width: fit-content;
    }
   .notifyBody{
    width: 70%;
    max-height: 300px;
    left: 15%;
    margin-top:2%;
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .notifyBody label {
     min-width:fit-content;
   }
   .el-timeline {
     width: 20%;
     float:left;
     height:100%;
     text-align: left;
     position: fixed;
   }
   .el-table{
     width: 1000px;
   }
  .el-dialog__headerbtn .el-dialog__close {
      position: fixed;
  }
  .msgListContainer{
    width: 100%;
  }
  .msgListContainer :nth-child(odd){
    display: flex;
    align-items: center;
    margin:10px;
  }
  .msgListContainer :nth-child(even){
    display: flex;
    align-items: center;
    margin:10px;
  }
  .messageInfo {
    width: 100%;
    height: 30px;
    background: darkorange;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .profile{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: rgba(0,0,0,0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width:40px;
    min-height:40px;
  }
  .btnList {
    min-width: fit-content;
  }
  .btnList li {
    right: 0px;
    width: fit-content;
    float: right;
  }
</style>
<style lang="scss" scoped>
.pay {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    bottom: 50px;
  }
}
</style>
